<template>
  <div class="app-container">
    <div class="title"><span>{{ product.name }}</span></div>
    <el-image
      style="width: 100%"
      :src="product.img1"
      :fit="contain"
    />
    <el-button class="btn" type="primary" @click="copyTaoword">第1步：领券！不下单</el-button>
    <el-button class="btn" type="primary" @click="copyTaoword">第2步：看上图领红包</el-button>
    <el-button class="btn" type="primary" @click="copyTaoword">第3步：进店铺 秒 下单</el-button>
    <div class="tip"><span>根据红包大小拍选项</span></div>
    <el-image
      style="width: 100%"
      :src="product.img2"
      :fit="contain"
    />
  </div>
</template>

<script>
import { getProduct } from '@/api/product'
import { Message } from 'element-ui'

export default {
  data() {
    return {
      product: {
        // name: '测试商品1',
        // img1: 'https://plus.hutool.cn/images/zz/mall4j.png',
        // img2: 'https://plus.hutool.cn/images/zz/mall4j.png',
        // taoword: '淘口令'
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      const id = this.$route.query.id
      if (!id) {
        return Message.error('链接已失效')
      }
      getProduct(id).then(response => {
        this.product = response.data
      })
    },
    copyTaoword() {
      const input = document.createElement('input')
      input.value = this.product.taoword // 替换为你要复制的内容
      document.body.appendChild(input)
      input.select()
      document.execCommand('copy')
      document.body.removeChild(input)
      this.$message.success('复制成功，打开淘宝APP查看')
    }
  }
}
</script>

<style scoped lang="scss">

.app-container {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  background-color: lightpink;

  .title {
    background-image: linear-gradient(45deg, rgb(223 16 197 / 89%), rgb(145 16 187 / 89%));
    color: white;
    height: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .btn {
    margin: 10px 20px;
  }

  .tip {
    margin: 10px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: 1px dashed red;
    border-radius: 2px;
  }
}
</style>
